<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <image src="http://img.cpgm.cc/panda/static/bouns/title.png" mode="widthFix" /> 
					</view>
				</view>
			</view>
		</u-navbar>

		<view class="main">
			<p class="title">一次性使用30次开箱机会或1500水晶必得永久分红人物</p>
			<view class="box">
				<image src="http://img.cpgm.cc/panda/static/bouns/box.png" mode="widthFix" />
				<image src="http://img.cpgm.cc/panda/static/bouns/dizuo.png" mode="widthFix" />
			</view>

			<view class="btnbox">
				<view class="leftbtn" >  
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000"  @click="opernjpBox(1)" class="button">
						<text>立即开箱</text>
						<text>30次数可开一次</text>
					</u-button>
					<view class="num">
						<image src="http://img.cpgm.cc/panda/static/invite/box.gif" mode="widthFix" />
						<text>剩余开箱次数:{{userinfo.turn_num}}</text>
					</view>
				</view>

				<view class="leftbtn">
					<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" class="button" @click="opernjpBox(2)">
						<text>水晶开箱</text>
						<text>1500水晶可开一次</text>
					</u-button>
					<view class="num">
						<image src="http://img.cpgm.cc/panda/static/home/dio.png" mode="widthFix" />
						<text>剩余水晶数量:{{userinfo.crystal}} </text>
					</view>
				</view>
			</view>

			<view class="botbox">
				<scroll-view scroll-y class="scrollbox">
					<p class="redbox">必得以下永久分红人物</p>
					<view class="lsit">
						<view class="item" v-for="(item , index) in list" :key="index" v-if="item.id > 9">
							<image :src="imgurl + item.img" mode="widthFix" />
							<p>{{item.name}}每日可领取分红 <text>{{bouns[item.id].explain}}</text>银元</p>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 开出的奖励 -->
		<u-mask :show="popshow">
			<view class="p_drawer" :class="[popshow ? 'drawer-show' : 'drawer-visible']">
				<image class="pkimg" src="http://img.cpgm.cc/panda/static/invitebox/masktit.png" mode="widthFix" />
				<view class="p_tit">恭喜您开出</view>
				<scroll-view scroll-y class="ranklist">
					<view class="flwarp">
						<view class="p_item" v-for="(item,index) in rewardlist" :key="index">
							<view class="p_top">
								<image :src="imgurl + item.img" mode="widthFix" />
								<text>{{item.name}} <span v-if="item.id == 1">*{{item.num}}</span> </text>
							</view>
							<view class="p_bot">
								<text>{{getexplain(item.id)}}</text>
								<text>{{item.id == 1?item.num + '银元':bouns[item.id].explain + '银元'}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="button ling" @click="popshow = false">开心收下</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
import config from '@/common/config/index.js'
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',
				},
				bouns:[
					{},
					{
						id:1,
						explain:'100'
					},
					{
						id:2,
						explain:'0.01~5'
					},
					{
						id:3,
						explain:'0.02~10'
					},
					{
						id:4,
						explain:'0.05~20'
					},
					{
						id:5,
						explain:'0.1~50'
					},
					{
						id:6,
						explain:'0.2~100'
					},
					{
						id:7,
						explain:'0.5~300'
					},
					{
						id:8,
						explain:'1~600'
					},
					{
						id:9,
						explain:'2~1000'
					},
					{
						id:10,
						explain:'1'
					},
					{
						id:11,
						explain:'5'
					},
					{
						id:12,
						explain:'18'
					},
					{
						id:13,
						explain:'68'
					},
					{
						id:14,
						explain:'188'
					},
					{
						id:15,
						explain:'388'
					},
					{
						id:16,
						explain:'999'
					},
					{
						id:17,
						explain:'1888'
					},
					{
						id:18,
						explain:'188'
					},
					{
						id:19,
						explain:'88'
					},
					{
						id:20,
						explain:'38'
					},
					{
						id:21,
						explain:'18'
					},
					{
						id:22,
						explain:'5'
					},
					{
						id:23,
						explain:'3'
					},
					{
						id:24,
						explain:'1'
					},
					{
						id:25,
						explain:'1888'
					},
					{
						id:26,
						explain:'1888'
					},
					{
						id:27,
						explain:'666'
					},
					{
						id:28,
						explain:'666'
					},
					{
						id:29,
						explain:'6666'
					},
					{
						id:30,
						explain:'6666'
					},
					{
						id:31,
						explain:'6666'
					},
					{
						id:32,
						explain:'666'
					},
					{
						id:33,
						explain:'6666'
					}
				],
				list:'',
				imgurl: config.imgurl,
				popshow:false,
				rewardlist:'',//用来保存开出奖励的数据
				userinfo: uni.getStorageSync('userinfo'),
			};
		},
		onLoad(){
			this.myPics();
		},
		methods: {

			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					if(res.code == 1) {
						this.userinfo = res.data
					}
				})
			},	
			// 获取我的图鉴
			async myPics (){
				let res = await this.$http.index.myPics({
					type:1
				});
				this.list = res.data
			},

			// 获取分红方式文字
			getexplain(id){
				console.log(id);
				if(id == 1){
					return '≈兑换'
				}else if( id > 1 && id < 10) {
					return '每日分红'
				}else  if( id > 9 && id < 18){
					return '每日固定分红'
				}else if( id > 17 && id < 25) {
					return '直接兑换'
				}else if( id > 24) {
					return '集齐兑换'
				}
			},
	
			// 开箱接口
			async opernjpBox(type){
				let res = await this.$http.index.opernjpBox({
					type:type
				})
				if(res.code == 1) {
					this.rewardlist = res.data
					this.popshow = true
					this.getUserInfo();
				}else {
					this.$u.toast(res.msg)
				}
			},


		},
	}
</script>

<style lang="less">

.zone {
	background: url('http://img.cpgm.cc/panda/static/bouns/bg.jpg');
	background-size: 100% 100%;
	min-height: 100vh;
}

.nav-bar2 {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 60px;
		padding: 0px 10px;
	}

	.n_left {
		width: 100%;
		display: flex;
		align-items: flex-end;
		text {
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
			margin-bottom: 10px;
		}
		image {
				width: 85%;
				margin-left: 5px;
			}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

.main {
}
	.box {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		image:nth-child(1) {
			width: 50%;
			z-index: 99;
		}
		image:nth-child(2) {
			width: 80%;
			margin-top: -50%;
		}

	}

	.title {
		color: rgba(255, 255, 255, 0.8);
		padding-left: 10px;
		font-size: 12px;
	}






.btnbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-items: flex-start;
	margin: 10px;

}

.leftbtn {
	width: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;

	.button {
		width: 100%;
		height: 60px;
		background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
		box-shadow: 0px 5px 0px 0px rgba(186,133,60,1);
		border-radius: 5px;
		display: flex;
		align-items: center;
		flex-direction: column;

		text:nth-child(1) {
			color: #000;
			font-weight: 600;
			font-size: 14px;
		}

		text:nth-child(2) {
			color: #000;
			font-size: 12px;
		}

	}

	.num {
		position: relative;
		width: fit-content;
		background: linear-gradient(180deg, #FFFFFF 0%, #D8D8D8 100%);
		display: flex;
		align-items: center;
		border-radius: 20px;
		margin-top: 20px;
		padding: 5px;

		image {
			width: 20px;
			margin-right: 5px;
		}
		text {
			color: #000;
			font-size: 12px;
		}
	}

.num::after {
   content: "";
        position: absolute;
        top:-11px;
        left:10%;
        z-index: 1;
        width:0px;
        height: 0px;
        border: 6px solid transparent;
        border-bottom:6px solid #fff;
	}
}

.rightbtn {
	width: 48%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 60px;
	background: linear-gradient(180deg, #FFF8B5 0%, #FFFFEB 100%);
	box-shadow: 0px 5px 0px 0px rgba(186,133,60,1);
	border-radius: 5px;

	.toptext {
		color: #000;
		font-weight: 600;
		font-size: 14px;
	}

	.num2 {
		display: flex;
		align-items: center;

		image {
			width: 20px;
		}
		text {
			color: #000;
    		font-size: 12px;
		}
	}
}

.button {
	line-height: 20px !important; 
}

.mart20 {
	margin-top: 20px;
}

.botbox {
	background: #E9E9E9 linear-gradient(180deg, #FFE6E0 0%, #FFFFFF 100%);
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1);
    border-radius: 5px 5px 0 0;
	padding: 10px;
	box-sizing: border-box;
}

.scrollbox {
	height: calc(100vh - 571px);
	box-sizing: border-box;
}

.redbox {
	color: #000;
	font-size: 12px;

	text {
		color: #FE431A;
	}
}

.lsit {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}
.item {
	width: 49%;
	box-sizing: border-box;
	background: #fff;
	padding: 10px;
	border-radius: 5px;
	display: flex;
	align-items: center;
	margin: 5px 0;

	image {
		width: 50px;
	}

	p {
		color: #000;
		font-size: 14px;
		font-weight: 600;

		text {
			color: #FE431A;
		}
	}
}




// 恭喜您开出弹出层


// pop弹窗
.popbox {
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 300px;
	padding: 15px;
}

.pkimg {
	width: 40%;
	position: absolute;
	top: 0;
	transform: translate(-50% ,-60%);
	left: 50%;
}

.p_tit {
	color: #000;
	font-size: 22px;
	font-weight: 600;
	text-align: center;
	margin-top: 40px;
}



.p_drawer {
	position: fixed;
	z-index: 10007;
	width: 100%;
	left: 0;
	bottom: -60vh;
	background: linear-gradient(180deg, #EACFB7 0%, #FFFFFF 100%);
	height: 60vh;
	padding: 15px;
	border-radius: 20px 20px 0 0;
}

.ranklist {
	height: calc(50vh - 20px);
	padding: 10px 0 ;
}

.drawer-show {
	transform: translateY(-100%);
	transition: all 0.25s linear;
}

.drawer-visible {
	transition: all 0.25s linear;
	transform: translate3D(0px, 0px, 0px) !important;
}

.flwarp {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 80px;
}
.p_item {
	width: 23%;
	margin: 0 1%;
	margin-bottom: 5px;

	.p_top {
		background: linear-gradient(180deg, #FFE6E0 0%, #FFFFFF 100%);
		border-radius: 7px;
		border: 1px solid #FFD2CA;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: relative;
		padding-bottom: 6px;

		image {
			width: 90%;
		}
		text {
			color: #000;
			font-size: 12px;
			margin-top: -10px;
			position: relative;
			z-index: 99;
		}
	}

	.p_bot {
		display: flex;
		flex-direction: column;
		align-items: center;

		text:nth-child(1) {
			color: #000;
			font-size: 12px;
		}
		text:nth-child(2) {
			color: #FE431A;
			font-size: 12px;
		}
	}
}

.ling {
	position: absolute;
	bottom: 6%;
	left: 10%;
	width: 80%;
	height: 50px;
	background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
	border-radius: 5px;
	color: #fff;
	font-size: 14px;
}


</style>
